<template>
  <view class="bg-white padding margin radius-lg shadow-lg shadow-blur">
    <slot name="header"></slot>
    <view class="flex justify-between">
      <view>
        <MrImage :src="articleItem.coverImage" :width="180" :height="180"></MrImage>
      </view>
      <view class="flex flex-sub flex-direction padding">
        <view class="text-bold text-xxl text-cut" style="width: 40vw">
          {{ articleItem.title }}
        </view>
        <view class="flex flex-sub align-center text-gray margin-top text-lg">
          <view class="  cuIcon-write"></view>
          <view class="text-cut" style="width: 40vw">
            {{ articleItem.username }}
          </view>
        </view>
        <view class="flex flex-sub align-center text-gray  margin-top-xs text-lg">
          <view class="cuIcon-time"></view>
          <view class="text-cut" style="width: 40vw">
            {{ articleItem.createTime }}
          </view>
        </view>
      </view>
    </view>

    <view class="flex justify-between">
      <view class="flex flex-sub align-center text-gray">
        <view class="cuIcon-activityfill"></view>
        <view class="text-cut" style="width: 40vw">
          {{ articleItem.type }}
        </view>
      </view>
      <view class="text-gray text-lg">
        <text class="cuIcon-attentionfill margin-lr-xs"></text>
        {{ articleItem.viewCount }}
        <text v-if="articleItem.isLike===1" class="cuIcon-appreciatefill margin-lr-xs" style="color: orange"></text>
        <text v-else class="cuIcon-attentionfill margin-lr-xs"></text>
        {{ articleItem.likeCount }}
        <text class="cuIcon-messagefill margin-lr-xs"></text>
        {{ articleItem.commentCount }}
      </view>
    </view>
    <slot name="footer"></slot>
  </view>
</template>

<script setup lang="ts">

import {defineProps} from "vue";
import MrImage from "@/components/common/MrImage.vue";

const props = defineProps({
  articleItem: {
    type: Object,
    default: {}
  }
})

</script>

<style scoped>

</style>